var tabListId =  'tabList';
var tabPanelsId = 'tabPanels'
var AjaxTabs = {			



  CloseTab: function(tabId)
		{
			var lastTabId = "";
			var somethingHasFocus = false;
			
			var closeTab = true;
			var closeJS = "if (window.tabClose"+tabId+") { closeTab = tabClose"+tabId+"(); }";
			eval(closeJS);
			if (!closeTab) // user cancelled close tab
			{
				return;
			}

			/* Remove all the event functions for this tab */
			eval("if (window.tabOpen"+tabId+") { tabOpen"+tabId+" = null; }");
			eval("if (window.tabFocus"+tabId+") { tabFocus"+tabId+" = null; }");
			eval("if (window.tabBlur"+tabId+") { tabBlur"+tabId+" = null; }");
			eval("if (window.tabClose"+tabId+") { tabClose"+tabId+" = null; }");

			/* Remove the tab */
			var tabList = document.getElementById(tabListId);
			for (var i=0; i < tabList.childNodes.length; i++)
			{
				if (tabList.childNodes[i] && tabList.childNodes[i].tagName == "LI" )
				{
					if (tabList.childNodes[i].getAttribute('id') == tabId)
					{
						tabList.removeChild(tabList.childNodes[i]);
					}
				}
			}

			/* Remove the panel */
			var panelList = document.getElementById(tabPanelsId);
			for (i=0; i < panelList.childNodes.length; i++)
			{
				if (panelList.childNodes[i] && panelList.childNodes[i].tagName == "DIV" )
				{
					if (panelList.childNodes[i].getAttribute('id') == "panel_" + tabId)
					{
						panelList.removeChild(panelList.childNodes[i]);
					}
				}
			}
		
			// If we closed the tab that had focus, focus on another tab.
			for (i=0; i < tabList.childNodes.length; i++)
			{
				if (tabList.childNodes[i] && tabList.childNodes[i].tagName == "LI" )
				{
					lastTabId = tabList.childNodes[i].getAttribute('id');
					if (tabList.childNodes[i].getAttribute('tabColor') + "selected" == tabList.childNodes[i].className)
					{
						somethingHasFocus = true;
					}
				}
			}
			
			if (!somethingHasFocus)
			{
				AjaxTabs.FocusTab(lastTabId);
			}
		},
				
	 CreateNewTab:	function(tabId, tabLabel, tabURL, tabIsCloseable, tabColor)
		{
			// create the tab
			var newLabel = document.createElement('span');
			newLabel.setAttribute("id", "tabSpan" + tabId);
			newLabel.className = tabColor;
			newLabel.setAttribute("tabColor", tabColor);
			if (tabIsCloseable)
			{
				newLabel.innerHTML = "<div class=\"tabHandle\">" + tabLabel + "</div> <img src=\"i/x.png\" border=\"0\"  width=\"14\" height=\"14\" onclick=\"AjaxTabs.CloseTab('" + tabId + "');return false;\" /><img src=\"i/rotate.png\" border=\"0\" width=\"14\" height=\"14\" onclick=\"AjaxTabs.RefreshTab('" + tabId + "');return false;\" />";
			}
			else
			{
				newLabel.innerHTML = "<div class=\"tabHandle\">" + tabLabel + "</div> <!--<img src=\"i/spacer.gif\" border=\"0\" width=\"14\" height=\"14\" />-->";
			}

			var oldTab = document.getElementById(tabId);
			var newTab = oldTab
 			if (oldTab == null) {
			  newTab = document.createElement('li'); 
      }

			newTab.className = tabColor;
			newTab.setAttribute("id", tabId);
			newTab.setAttribute("tabId", tabId);
			newTab.setAttribute("tabLabel", tabLabel);
			newTab.setAttribute("tabColor", tabColor);
			newTab.onclick = function () { AjaxTabs.FocusTab(tabId); return false; }
			newTab.setAttribute("tabIsCloseable", "0");
			
			if (tabIsCloseable)	{
				newTab.setAttribute("tabIsCloseable", "1");
			}
			newTab.setAttribute('isFocused','true');
			newTab.appendChild(newLabel);
			if (oldTab == null) {
 			  document.getElementById(tabListId).appendChild(newTab);
      }
			
			// create the panel
			var oldPanel = document.getElementById('panel_' + tabId);
			var newPanel = oldPanel
			if (oldPanel == null) {
 			    newPanel = document.createElement('div');
                        }
			newPanel.setAttribute('id','panel_' + tabId);
			newPanel.setAttribute("panelURL", tabURL);
			newPanel.setAttribute("tabLabel", tabLabel);
			newPanel.setAttribute("tabColor", tabColor);
			newPanel.className = tabColor + "Panel";
			
			/* newPanel.style.display = "none"; */
			document.getElementById(tabPanelsId).appendChild(newPanel);

			AjaxTabs.FocusTab(tabId); // this will get run before the tab has any tabFocus() function, so tabFocus() won't get run. (make your tabOpen() run something if you need it to)
			AjaxTabs.RefreshTab(tabId); // load the page up
			$("#tabList").sortable();
		},
		
	 GetFocusedTabId: function()
		{
			var tabList = document.getElementById(tabListId);
			for (var i=0; i < tabList.childNodes.length; i++)
			{
				if (tabList.childNodes[i] && tabList.childNodes[i].tagName == "LI" )
				{
					if (tabList.childNodes[i].getAttribute('tabColor') + "selected" == tabList.childNodes[i].className)
					{
						return tabList.childNodes[i].getAttribute('id');
					}
				}
			}
      return false;
		},
		
	FocusTab: function(tabId)
		{
			var currentFocusedTabId = AjaxTabs.GetFocusedTabId();
			
			var tabList = document.getElementById(tabListId);
			for (var j=0; j < tabList.childNodes.length; j++)
			{
				if (tabList.childNodes[j] && tabList.childNodes[j].tagName == "LI" )
				{
					var className = tabList.childNodes[j].getAttribute("tabColor");
  					if (className == null) {  
              className = ''; 
            }
					var currentTabId = tabList.childNodes[j].getAttribute("tabId");
					if (currentTabId == tabId)
					{
						tabList.childNodes[j].className = className + "selected";
//						document.getElementById("tabSpan" + tabList.childNodes[j].getAttribute("id")).className = className + "selected";
//						document.getElementById("panel_" + currentTabId).style.display = "block";
		 			        document.getElementById("panel_" + currentTabId).style.position = ""; 
   						document.getElementById("panel_" + currentTabId).style.visibility = "visible"; 
   						document.getElementById("panel_" + currentTabId).style.height = 'auto';	                       


						/* @annotation: This needs a lot of work
 */						
					}
					else
					{
						tabList.childNodes[j].className = className;
//						document.getElementById("tabSpan" + tabList.childNodes[j].getAttribute("id")).className = className;
						if(currentTabId != null) {
   						   document.getElementById("panel_" + currentTabId).style.display = "";
   						   document.getElementById("panel_" + currentTabId).style.position = "absolute"; 
   						   document.getElementById("panel_" + currentTabId).style.visibility = "hidden"; 
     						   document.getElementById("panel_" + currentTabId).style.height = '0px'
                                                }

					}
				}
			}
			
			if (tabId != currentFocusedTabId)
			{
				eval("if (window.tabBlur"+currentFocusedTabId+") { tabBlur"+currentFocusedTabId+"(); }");
				eval("if (window.tabFocus"+tabId+") { tabFocus"+tabId+"(); }");
			}
		},
		
	 RefreshTab: function(tabId)
		{
			/* document.getElementById("panel_" + tabId).innerHTML = "Hello, World.<br/>" + document.getElementById("panel_" + tabId).getAttribute("panelURL"); */
			
			var http = getHTTPObject();
			var panel = document.getElementById('panel_' + tabId);
			var page = panel.getAttribute('panelURL');
			var url = page;
			var now = new Date();
			var openFuncExists = false;
			var timeoutId;
			page = url;
			// hack to get IE to refresh all the time by making each url unique by adding a timestamp onto it. (ie tries to cache everything)
			if (url.indexOf("?") > -1) // this url has get params somewhere
			{
				if (url.substr(url.length-1) == "&") // has a & at the end, no need to append another
				{
					
					url = url + "t=" + now.getTime();
				}
				else // no & on the end, append it
				{
					url = url + "&t=" + now.getTime();
				}
			}
			else // no params on this url. append a ?
			{
				url = url + "?t=" + now.getTime();
			}
			// end IE hack				

			http.open("GET", url, true);
			http.onreadystatechange = function() {
				if (http.readyState == 4) {
					if (http.status == 200)
					{
						window.clearTimeout(timeoutId);
						var htmlDoc = http.responseText;
						
						document.getElementById('panel_' + tabId).innerHTML = htmlDoc;
						
						if (document.getElementById('script_' + tabId))
						{
							/* Setup the event functions for this tab */
							var script = document.getElementById('script_' + tabId).innerHTML;
							eval(script);
							eval("if (window.tabOpen"+tabId+") { tabOpen"+tabId+"(); }");
						}
					}
				}
			}
			document.getElementById('panel_' + tabId).innerHTML = "<div class='loadingBox'><b>Please wait. Loading...</b> <img src='./i/indicator.gif' /></div>";
			
			http.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
			http.send(null);
			
			timeoutId = window.setTimeout(
				function() {
					
					switch (http.readyState) {
						case 1:
						case 2:
						case 3:
							http.abort();
							document.getElementById('panel_' + tabId).innerHTML = "<h2>Error Loading Data</h2>De server reageerde niet binnen de tijdlimiet. Mogelijk is er een technisch probleem. Je kan het <a href=\"javascript:void(0)\" onclick=\"AjaxTabs.RefreshTab('" + tabId + "');\">opnieuw proberen.</a><br>Het kan ook zijn dat er een probleem is met uw internetverbinding.";
							//alert("Oops. There was an error retreiving data from the server. Please try again in a few moments.");
							break;
						default:
							break;
					}
				if(http.status == 404){ 
				AjaxTabs.SetURL('pages/404.php?page='+ page);
}

				},
				3000 // twenty seconds
			);

   	 },
		
	 TabExists: function(tabId)
		{
			var exists = false;
			var tabList = document.getElementById(tabListId);
			for (var j=0; j < tabList.childNodes.length; j++)
			{
 				if (tabList.childNodes[j] && tabList.childNodes[j].tagName == "LI" )
  			{
	  			var currentTabId = tabList.childNodes[j].getAttribute("tabId");
		  		var currentTabHTMLId = tabList.childNodes[j].getAttribute("id");
			  	if (currentTabId == tabId)
				  {
 						exists = true;
  				}
	  			if (currentTabHTMLId == tabId)
		  		{
            tabList.childNodes[j].setAttribute("tabId", tabId);
          }
				}
			}
			return exists;
		},
		
	 OpenTab: function(tabId, tabLabel, tabURL, tabIsCloseable, tabColor)
		{
			if (AjaxTabs.TabExists(tabId))
			{
				AjaxTabs.FocusTab(tabId);
			}
			else
			{
				AjaxTabs.CreateNewTab(tabId, tabLabel, tabURL, tabIsCloseable, tabColor);
				$("#tabList").sortable();
			}
		},
		

	 SetTabURL: function(tabId, url)
		{
			alert(tabId);
			document.getElementById('panel_' + tabId).setAttribute('panelURL', url);
			AjaxTabs.RefreshTab(tabId);
		},
	
	 SetURL: function(url)
		{
			document.getElementById('panel_' + AjaxTabs.GetFocusedTabId()).setAttribute('panelURL', url);
			AjaxTabs.RefreshTab(AjaxTabs.GetFocusedTabId());
		},



      changeLabelText : function(tabid , label )

      {


              var label = document.getElementById("tabSpan" + tabid);

              var labelText = label.innerHTML;

labelText.replace(/<div class="tabHandle">(.*?)<\/div>/ , '<div class="tabHandle">' + label + '</div>');         label.innerHTML = labelText;
       

      } 

};
